<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container{
				background-color: #080808;
				text-align: center;
			}
			.img{
				margin-top: 90px;
				
			}
			.di{
				width: 300px;
				height: 50px;
				background-color: aqua;
				margin: auto;
				line-height: 50px;
				margin-top: 100px;
			}
			#zi{
				color: #00FFFF;
				font-size: 20px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="javascript/dist/css/bootstrap.min.css"/>
		<script type="text/javascript">
			window.onload = function(){
				var but1 = document.getElementsByClassName('but1')[0];
				var but2 = document.getElementsByClassName('but1')[1];
				var img = document.getElementsByClassName('img')[0];
				var oimg = ['./img/img1.jpg','./img/img2.webp','./img/img3.webp','./img/img4.webp','./img/img5.webp','./img/img6.webp','./img/img7.webp','./img/img8.webp','./img/img9.jpeg','./img/img10.png'];
				var oi = 0;
				var zi = document.getElementById('zi');
				zi.innerText = '一共' + oimg.length + '张图片' + '当前第' + (oi + 1) + '图片';
				but1.onclick = function(){
					oi--;
					if(oi < 0){
						oi = 9;
					}
					img.src = oimg[oi];
					zi.innerText = '一共' + oimg.length + '张图片' + '当前第' + (oi + 1) + '图片';
				}
				
				but2.onclick = function(){
					oi++;
					oi %= oimg.length;
					img.src = oimg[oi];
					zi.innerText = '一共' + oimg.length + '张图片' + '当前第' + (oi + 1) + '图片';
				}
			}
		</script>
	</head>
	<body>
		<div class="container">
			<div id="zi"></div>
			<img src="./img/img1.jpg" alt="" class="img">
			<div class="di">
				<button class="but1">上一页</button>
				<button class="but1">下一页</button>
			</div>
		</div>
	</body>
</html>
